<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>供应商管理系统</title>
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>

    <script>
        $(function () {
            getEntityList()
        })

        function getEntityList() {
            $.ajax({
                url: "http://localhost:8080/rtl/selectAll",
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    console.log(data)
                    let info = `<table id="table1">
                        <tr>
                            <td colspan="9">实时位置列表&nbsp&nbsp<a href="#" onclick="showAddTable()">添加位置</a></td>
                        </tr>
                        <tr>
                            <td>序号</td>
                            <td>经度</td>
                            <td>纬度</td>
                            <td>海拔</td>
                            <td>速度</td>
                            <td>数据上传时间</td>
                            <td>追踪人员ID</td>
                            <td colspan="2">操作</td>
                        </tr>`
                    for (const item of data) {
                        // console.log(item)
                        info += `
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.longitude}</td>
                            <td>${item.latitude}</td>
                            <td>${item.altitude}</td>
                            <td>${item.speed}</td>
                            <td>${item.updateTime}</td>
                            <td>${item.humanId}</td>
                            <td><a href="#" onclick="showEditTable(${item.id})">修改</a></td>
                            <td><a href="#" onclick="delEntityViaId(${item.id})">删除</a></td>
                        </tr>
                        `
                    }
                    info += `</table>`
                    // jQ 将组合好的元素插入(replace)到div
                    $("#list-table").html(info)
                }
            })
        }

        function delEntityViaId(id) {
            $.ajax({
                url: "http://localhost:8080/rtl/deleteByPrimaryKey?id=" + id,
                type: "DELETE",
                dataType: "json",
                headers: {
                    'Content-Type': 'application/json'
                },
                success: function (data) {
                    alert(data)
                    getEntityList()
                }
            })
        }

        function showEditTable(pk) {
            $.ajax({
                url: "http://localhost:8080/rtl/selectByPrimaryKey?id=" + pk,
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    var edit = `<table id="table2">
                        <tr>
                            <td colspan="9">数据修改</td>
                        </tr>
                        <tr>
                            <td>序号</td>
                            <td>经度</td>
                            <td>纬度</td>
                            <td>海拔</td>
                            <td>速度</td>
                            <td>数据上传时间</td>
                            <td>追踪人员ID</td>
                            <td colspan="2">操作</td>
                        </tr>
                        <tr>
                            <td><input type="text" id="Eid" hidden value="${data.id}"></td>
                            <td><input type="text" id="Elongitude" value="${data.longitude}"></td>
                            <td><input type="text" id="Elatitude" value="${data.latitude}"</td>
                            <td><input type="text" id="Ealtitude" value="${data.altitude}"</td>
                            <td><input type="text" id="Espeed" value="${data.speed}"</td>
                            <td><input type="text" id="EupdateTime" value="${data.updateTime}"</td>
                            <td><input type="text" id="EhumanId" value="${data.humanId}"</td>
                            <td><a href="#" onclick="doEdit()">提交修改</a></td>
                            <td><a href="#" onclick="removeEditTable()">关闭</a></td>
                        </tr></table>`
                    $("#edit-table").html(edit)
                }
            })

        }

        function showAddTable() {
            var add = `<table>
                            <tr>
                                <td colspan="8">数据添加</td>
                            </tr>
                            <tr>
                            <td>经度</td>
                            <td>纬度</td>
                            <td>海拔</td>
                            <td>速度</td>
                            <td>数据上传时间</td>
                            <td>追踪人员ID</td>
                                <td colspan="2">操作</td>
                            </tr>
                            <tr>
                                <td><input id="longitude"></td>
                                <td><input id="latitude"></td>
                                <td><input id="altitude"></td>
                                <td><input id="speed"></td>
                                <td><input id="updateTime"></td>
                                <td><input id="humanId"></td>
                                <td colspan="1"><a href="#" onclick="doAdd()">添加</a></td>
                                <td colspan="1"><a href="#" onclick="removeAddTable()">关闭</a></td>
                            </tr>
                        </table>`
            $("#add-table").html(add)
        }

        function doAdd() {
            $.ajax({
                url: "http://localhost:8080/rtl/insert",
                type: "POST",
                dataType: "json",
                headers: {
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify({
                    // jQ, 使用 $('#id').val() 的方式直接获取input中的值
                    longitude: $('#longitude').val(),
                    latitude: $('#latitude').val(),
                    altitude: $('#altitude').val(),
                    speed: $('#speed').val(),
                    updateTime: $('#updateTime').val(),
                    humanId: $('#humanId').val()
                }),
                success: function (data) {
                    alert(data)
                    getEntityList()
                    removeAddTable()
                }
            })
        }

        function doEdit() {
            $.ajax({
                url: "http://localhost:8080/rtl/updateByPrimaryKey",
                type: "PUT",
                dataType: "json",
                headers: {
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify({
                    id: $('#Eid').val(),
                    longitude: $('#Elongitude').val(),
                    latitude: $('#Elatitude').val(),
                    altitude: $('#Ealtitude').val(),
                    speed: $('#Espeed').val(),
                    updateTime: $('#EupdateTime').val(),
                    humanId: $('#EhumanId').val()
                }),
                success: function (data) {
                    alert(data)
                    getEntityList()
                    removeEditTable()
                }
            })
        }

        function removeAddTable() {
            $("#add-table").html(``)
        }

        function removeEditTable() {
            $("#edit-table").html(``)
        }
    </script>
</head>

<body>
<h3>供应商管理系统</h3>
<div id="list-table">
</div>
<div id="add-table">
</div>
<div id="edit-table">
</div>
</body>
</html>